
body {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
width: 100.9%;
height: 100%;
background-color: #f6fae8;
// overflow-y: hidden;
}


@primary-light: #8abdff;
@primary: #6d5dfc;
@primary-dark: #5b0eeb;
@white: #ffffff;
@greyLight-1: #e4ebf5;
@greyLight-2: #c8d0e7;
@greyLight-3: #bec8e4;
@greyDark: #9baacf;
@keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes boxAn {
  0% {
    // transform: rotate(45ged);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    // transform: rotate(45ged);
    opacity: 0;
  }
}
@keyframes box3An {
  0% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes box4An {
  0% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {

    transform: scale(0.5);
    transform: translateY(20px);
    transform: translateX(-5px);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    transform: translateY(60px);
    opacity: 0;
  }
}
@keyframes box4s1 {
  0% {
    transform: scale(1.1);
    transform: translateX(10px);
    opacity: 1;
  }
  50% {
    transform: scale(0.6);
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    transform: translate(-20px, 50px);
    opacity: 0;
  }
}
@keyframes box4s2 {
  0% {
    transform: scale(2);
    transform: translateX(50px);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    transform: translateX(60px);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    transform: translate(60px, 50px);
    opacity: 0;
  }
}
@keyframes box4s3 {
  0% {
    transform: scale(1);
    transform: translateX(30px);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    transform: translateX(40px);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    transform: translate(60px,50px);
    opacity: 0;
  }
}
.dribbble {
  position: fixed;
  font-size: 2.6rem;
  right: 2rem;
  bottom: 1rem;
  color: #EA4C89;
}

@keyframes img1 {
  0% {

  }
  50% {
  }
  100% {
    width: 350px;
    background-position: -25px -8px;
    background-size: 120%;
    transform: translateX(-50px);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
@keyframes img2 {
  0% {

  }
  50% {
  }
  100% {
    width: 350px;
    background-position: -50px -8px;
    background-size: 120%;
    transform: translateX(-50px);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
@keyframes img3 {
  0% {

  }
  50% {
  }
  100% {
    width: 350px;
    background-position: -45px -8px;
    background-size: 120%;
    transform: translateX(-50px);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

@keyframes imgtext {
  0% {
    transform: translateX(-50px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    background-position: -25px -8px;
    background-size: 120%;
    transform: translateX(-30px);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    // width: 350px;
  }
}

